<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1500px;height:1000px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data = [{
            name: '合同签订',
            children: [{
                name: '完善需求文档',
                value: 15,
                children: [{
                    name: '接口调试',
                    value: 2
                }, {
                    name: '完善表单数据结构',
                    value: 7,
                    children: [{
                        name: 'WEB后端开发',
                        value: 3
                    },{
                        name: '小程序前端I',
                        value: 2
                    },{
                        name: 'WEB前端I',
                        value: 2
                    }
							  ]
                }, {
                    name: '根据需求完善Demo',
                    value: 4
                }]
            }, {
                name: '中后期汇报',
                value: 10,
                children: [{
                    name: 'PC上部署坏境',
                    value: 2
                }, {
                    name: '准备PPT',
                    value: 5
                }]
            }]
        }, {
            name: 'OKR核心思想',
            children: [{
                name: '沟通',
                children: [{
                    name: '积极主动',
                    value: 1
                }, {
                    name: '有效健康',
                    value: 2
                }]
            }]
        }];

        // option = {
        //     series: {
        //         type: 'sunburst',
        //         // highlightPolicy: 'ancestor',
        //         data: data,
        //         radius: [0, '90%'],
        //         itemStyle: {
        //               borderRadius: 7,
        //               borderWidth: 2
        //         },
        //         label: {
        //             rotate: 'radial'
                   
        //         }
        //     }
        // };
        option = {
             series: {
                type: 'sunburst',
              emphasis: {
                focus: 'ancestor'
                },
                data: data,
                radius: [0, '90%'],
                label: {
                    rotate: 'radial'
                }
             }
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>